<template>
    <basic-container >
      <div class="filter-container">
        <el-button-group>
          <el-button type="primary"
                     v-if="orgManager_btn_add"
                     icon="plus"
                     @click="handlerAdd">添加
          </el-button>
          <el-button type="primary"
                     v-if="orgManager_btn_edit"
                     icon="edit"
                     @click="handlerEdit">编辑
          </el-button>
          <el-button type="primary"
                     v-if="orgManager_btn_del"
                     icon="delete"
                     @click="handleDelete">删除
          </el-button>
        </el-button-group>
      </div>

      <el-row :style="{height:(clientHeight-175)+'px'}">
        <el-col :span="8"
                style='margin-top:15px;'>
          <el-tree class="filter-tree"
                   :data="treeData"
                   node-key="id"
                   highlight-current
                   :props="defaultProps"
                   :filter-node-method="filterNode"
                   @node-click="getNodeData"
                   default-expand-all>
          </el-tree>
        </el-col>
        <el-col :span="16"
                style='margin-top:15px;'>
          <el-card class="box-card">
            <el-form :label-position="labelPosition"
                     label-width="80px"
                     :rules="rules"
                     :model="form"
                     ref="form">
              <el-form-item label="父级节点"
                            prop="parentId">
                <el-input v-model="form.parentId"
                          :disabled="formEdit"
                          placeholder="请输入父级节点"></el-input>
              </el-form-item>
              <el-form-item label="节点编号"
                            prop="id"
                            v-if="formEdit">
                <el-input v-model="form.id"
                          :disabled="formEdit"
                          placeholder="节点编号"></el-input>
              </el-form-item>
              <el-form-item label="机构名称"
                            prop="name">
                <el-input v-model="form.name"
                          :disabled="formEdit"
                          placeholder="请输入名称"></el-input>
              </el-form-item>
              <el-form-item label="机构编码"
                            prop="code">
                <el-input v-model="form.code"
                          :disabled="formEdit"
                          placeholder="请输入机构编码"></el-input>
              </el-form-item>
              <el-form-item label="类型"
                            prop="type">
                <el-select class="filter-item"
                           v-model="form.type"
                           :disabled="formEdit"
                           placeholder="请输入机构类型">
                  <el-option v-for="item in  typeOptions"
                             :key="item"
                             :label="item | typeFilter"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="排序"
                            prop="sort">
                <el-input type="number"
                          v-model="form.sort"
                          :disabled="formEdit"
                          placeholder="请输入排序"></el-input>
              </el-form-item>

              <el-form-item label="状态"
                            prop="isActive">
                <el-radio-group v-model="form.isActive">
                <el-radio :label="true" :disabled="formEdit">正常</el-radio>
                <el-radio :label="false" :disabled="formEdit">停用</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item v-if="formStatus == 'update'">
                <el-button type="primary"
                           @click="update">更新
                </el-button>
                <el-button @click="onCancel">取消</el-button>
              </el-form-item>
              <el-form-item v-if="formStatus == 'create'">
                <el-button type="primary"
                           @click="create">保存
                </el-button>
                <el-button @click="onCancel">取消</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </basic-container>
</template>

<script>
  import {addObj, delObj, fetchOrgTree, getObj, putObj} from '@/modules/sys/api/org'
  import {mapGetters} from 'vuex'

  export default {
    name: 'org',
    data() {
      return {
        clientHeight: document.documentElement.clientHeight,
        list: null,
        total: null,
        formEdit: true,
        formAdd: true,
        formStatus: '',
        showElement: false,
        typeOptions: ['0', '9'],
        methodOptions: ['GET', 'POST', 'PUT', 'DELETE'],
        listQuery: {
          name: undefined
        },
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        rules: {
          parentId: [
            {required: true, message: '请输入父级节点', trigger: 'blur'}
          ],
          id: [
            {required: true, message: '请输入节点编号', trigger: 'blur'}
          ],
          name: [
            {required: true, message: '请输入机构名称', trigger: 'blur'}
          ],
          type: [
            {required: true, message: '请输入机构类型', trigger: 'blur'}
          ],
        },
        labelPosition: 'right',
        form: {
          name: undefined,
          orderNum: undefined,
          parentId: undefined,
          id: undefined,
          isActive: undefined,
          type: undefined,
          code: undefined
        },
        currentId: 0,
        orgManager_btn_add: false,
        orgManager_btn_edit: false,
        orgManager_btn_del: false,
        trueValue : true,
        falseValue : false
      }
    },
    filters: {
      typeFilter(type) {
        const typeMap = {
          0: '公司',
          9: '树节点'
        }
        return typeMap[type]
      }
    },
    created() {
      this.getList()
      this.orgManager_btn_add = this.permissions['sys.org.add']
      this.orgManager_btn_edit = this.permissions['sys.org.edit']
      this.orgManager_btn_del = this.permissions['sys.org.delete']
    },
    computed: {
      ...mapGetters([
        'elements',
        'permissions'
      ])
    },
    methods: {
      getList() {
        fetchOrgTree(this.listQuery).then(response => {
          this.treeData = response.data.data
        })
      },
      filterNode(value, data) {
        if (!value) return true
        return data.label.indexOf(value) !== -1
      },
      getNodeData(data) {
        if (!this.formEdit) {
          this.formStatus = 'update'
        }
        getObj(data.id).then(response => {
          this.form = response.data.data
        })
        this.currentId = data.id
        this.showElement = true
      },
      handlerEdit() {
        if (this.form.id) {
          this.formEdit = false
          this.formStatus = 'update'
        }
      },
      handlerAdd() {
        this.resetForm()
        this.formEdit = false
        this.formStatus = 'create'
      },
      handleDelete() {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delObj(this.currentId).then(() => {
            this.getList()
            this.resetForm()
            this.onCancel()
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
          })
        })
      },
      update() {
        this.$refs.form.validate((valid) => {
          if (!valid) return
          putObj(this.form).then(() => {
            this.getList()
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
          })
        })

      },
      create() {
        this.$refs.form.validate((valid) => {
          if (!valid) return
          addObj(this.form).then(() => {
            this.getList()
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
          })
        })
      },
      onCancel() {
        this.formEdit = true
        this.formStatus = ''
      },
      resetForm() {
        this.form = {
          parentId: this.currentId,
          isActive: true,
          type: '0'
        }
      }
    }
  }
</script>

